<!--三方应用集成配置管理-->
<template>
  <div id="thirdApplicationKeyConfig" class="app-container">
    <!--列表-->
    <div class="table-container flex-main">
      <div class="table-container-header">
        <table-toolbar :remove="false" :create="false" @refresh="handleFilter">
          <template slot="rightTool">
            <search v-model="listQuery.keyword" placeholder="请输入应用名称" @search="handleFilter" />
          </template>
        </table-toolbar>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @row-click="handleRowClick"
        @sort-change="sortChange">
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="gmtCreated" sortable label="新增时间" width="160">
          <template slot-scope="scope">{{ scope.row.gmtCreated | formatDate }}</template>
        </el-table-column>
        <el-table-column prop="type" sortable label="类型" width="100">
          <template slot-scope="scope">
            {{ (types.filter(item=>item.id ===scope.row.type ))[0].name }}
          </template>
        </el-table-column>
        <el-table-column prop="appId" label="AppId" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="color-primary common-cursor" @click="handleLook(scope.row)">{{ scope.row.appId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用名称" prop="name" width="200" show-overflow-tooltip />
        <el-table-column label="项目标识" prop="projectId" width="100" />
        <el-table-column label="描述" prop="remark" min-width="300" show-overflow-tooltip />
        <el-table-column label="操作" align="center" fixed="right" width="90">
          <template slot-scope="scope">
            <button-option icon="el-icon-delete" skin="danger" title="删除" @click="handleRemoveSingle(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>

    <!--新增/编辑侧边栏-->
    <model-dialog :visible="dialogVisible" title="详情" @close="dialogVisible = !dialogVisible">
      <template>
        <el-form
          ref="dataForm"
          :model="thirdApplicationKeyConfigRecord"
          label-position="right"
          label-width="120px">
          <el-form-item label="类型:" prop="type">
            {{ (types.filter(item=>item.id === thirdApplicationKeyConfigRecord.type ))[0].name }}
          </el-form-item>
          <el-form-item label="创建时间:" prop="gmtCreated">
            {{ thirdApplicationKeyConfigRecord.gmtCreated | formatDate }}
          </el-form-item>
          <el-form-item label="更新时间:" prop="gmtModified">
            {{ thirdApplicationKeyConfigRecord.gmtModified | formatDate }}
          </el-form-item>
          <el-form-item label="应用名称:" prop="name">
            {{ thirdApplicationKeyConfigRecord.name }}
          </el-form-item>
          <el-form-item label="项目标识:" prop="projectId">
            {{ thirdApplicationKeyConfigRecord.projectId }}
          </el-form-item>
          <el-form-item label="AppId:" prop="appId">
            <copy-text :content="thirdApplicationKeyConfigRecord.appId" position="left" />
          </el-form-item>
          <el-form-item label="AppKey:" prop="appKey">
            <copy-text :content="thirdApplicationKeyConfigRecord.appKey" position="left" />
          </el-form-item>
          <el-form-item label="AppSecret:" prop="appSecret">
            <copy-text :content="thirdApplicationKeyConfigRecord.appSecret" position="left" />
          </el-form-item>
          <el-form-item label="服务器地址:" prop="serverUrl">
            <copy-text :content="thirdApplicationKeyConfigRecord.serverUrl" position="left" />
          </el-form-item>
          <el-form-item label="请求token:" prop="serverToken">
            <copy-text :content="thirdApplicationKeyConfigRecord.serverToken" position="left" />
          </el-form-item>
          <el-form-item label="描述:" prop="remark">
            {{ thirdApplicationKeyConfigRecord.remark }}
          </el-form-item>

          <el-form-item label="备用地址1:" prop="url1">
            <copy-text :content="thirdApplicationKeyConfigRecord.url1" position="left" />
          </el-form-item>
          <el-form-item label="备用地址2:" prop="url2">
            <copy-text :content="thirdApplicationKeyConfigRecord.url2" position="left" />
          </el-form-item>
          <el-form-item label="备用地址3:" prop="url3">
            <copy-text :content="thirdApplicationKeyConfigRecord.url3" position="left" />
          </el-form-item>
        </el-form>
      </template>
    </model-dialog>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      types: [
        { id: 1, name: '公众号' },
        { id: 2, name: '小程序' },
        { id: 3, name: '企业微信' },
        { id: 4, name: '钉钉' }
      ],
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        sort: this.common.SORT_DEFAULT
      },

      dialogVisible: false,
      thirdApplicationKeyConfigRecord: {
        type: 1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 表格自带方法开始

    /* 表格行数据单击*/
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /* 表格列排序*/
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    // 表格自带方法结束

    /* 搜索*/
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    /* 重置*/
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        sort: this.common.SORT_DEFAULT
      }
      this.fetchData()
    },
    async fetchData() {
      const response = await this.$store.dispatch('applicationKeyConfigPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },
    handleLook(row) {
      this.thirdApplicationKeyConfigRecord = row
      this.dialogVisible = true
    },
    handleRemoveSingle(row) {
      this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('applicationKeyConfigRemove', [row.id]).then(response => {
          this.handleReset()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {})
      }).catch(() => {})
    }

  }
}
</script>
<style lang="scss" scoped>
</style>
